<!--组件-选着参数-->
<template>
  <div>

    <!--标题、说明、范围-->
    <div class="title all" v-if="title">
      <text class="font28 text2">{{title}}</text>
      <LImage class="explain" v-if="explain && explain.length" :src="Config.img('wenhao.png')" @click="explainClick"></LImage>
    </div>


    <div class="frame bg2" @click="selectClick">
      <LImage v-if="leftImg" class="left-image" :src="Config.img(leftImg)"></LImage>
      <text :class="['input', 'font28', 'all', isEdit?'text1':'text2']">{{item}}</text>
      <LImage class="arrow-image" :src="Config.img('xiala.png')"></LImage>
    </div>
    
  </div>
</template>

<script>

//功能
import jmodal from "@/_js/modal";
import jconfig from "@/_js/config";

const weexFunction = weex.requireModule("WeexFunction");


export default {

  model:{
    prop:"value",
    event:"change",
  },

  props:{
    
    value: { //值
      type:String,
      default:'',
    },

    isEdit: { //turn可编辑
      type:Boolean,
      default:true,
    },

    selects:{ //类型
      type:Array,
      default:undefined,
    },

    valueKey: { //取值关键字
      type:String,
      default:'',
    },

    title: { //标题
      type:String,
      default:undefined,
    },

    explain: { //说明
      type:String,
      default:undefined,
    },

    leftImg: { //左图标
      type:String,
      default:'',
    }
  },

  data() {
    return {   
      Config:jconfig,
    };
  },

  mounted() {

  },

  computed: {

    item() {
      var map = this.selects[this.value];
      if (this.valueKey) {
        return map[this.valueKey];
      }
      return map;
    }
  },

  methods:{

    /********************************************** 点击触发*/
    //说明点击
    explainClick() {
      var parm = {'message':this.explain};
      jmodal.alert(parm,(bool)=>{
        navigator.back();
      });
    },

    //选择点击
    selectClick() {

      if (!this.isEdit) {
        return;
      }

      var options = [];
      this.selects.forEach(item => {
        var str = this.valueKey ? item[this.valueKey] : item;
        options.push(str);
      });
      
      jmodal.actionSheet(options, this.item,(selected)=>{

        for (var index = 0; index < this.selects.length; index++) {
          var item = this.selects[index];
          var str = this.valueKey ? item[this.valueKey] : item;
          if (str == selected) {
            this.$emit("change", index);
            this.$emit("select", index);
            break;
          }
        }
      });
    },
  }
}
</script>


<style src="@/_css/style.css"></style>
<style scoped>
.title{
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}
.explain {
  width: 28px;
  height: 28px;
  margin-left: 8px;
  margin-right: 8px;
}
.frame{
  flex-direction: row;
  align-items: center;

  height: 88px;
  border-radius: 16px;

  border-width: 2px;
  border-color: transparent;

  padding-left: 40px;
  padding-right: 40px;
}
.arrow-image{
  width: 20px;
  height: 20px;

  margin-left: 40px;
}
.left-image {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

/*************** 宽高*/
.width8{
  width: 8px;
}
.width30 {
  width: 30px;
}
</style>
